<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>

	<body>
		<style type="text/css">
			input {
				width: 80px;
				height: 30px;
				font-size: 30px;
				border: 0;
				border-radius:5px ;
			}
			
			input.active {
				background: teal;
				color: white;
			}
			
			#div1 div {
				width: 200px;
				height: 200px;
				border: 2px solid black;
				font-size: 100px;
				line-height: 200px;
				text-align: center;
				display: none;
			}
			
			#div1 div.show {
				display: block;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var oDiv = document.getElementById('div1');
				function FengZhuang(a,b){
					var aBtn = oDiv.getElementsByTagName(a);
					var aDiv = oDiv.getElementsByTagName(b);
					var i = 0;
	
					for(i = 0; i < aBtn.length; i++) {
						aBtn[i].index = i;
						aBtn[i].onclick = function() {
							for(i = 0; i < aBtn.length; i++) {
								aBtn[i].className = '';
								aDiv[i].style.display = 'none';
							}
							this.className = 'active';
							aDiv[this.index].style.display = 'block';
						}
					}
				}
				FengZhuang("input","div")
			}
			
		</script>

		<div id="div1">
			<input type="button" value="111" class="active" />
			<input type="button" value="222" />
			<input type="button" value="333" />
			<div class="show">111</div>
			<div>222</div>
			<div>333</div>
		</div>

	</body>

</html>
